<template>
  <div class="filter-container">
    <!-- <el-input
      v-model="listQueryValue.accountId"
      :placeholder="listQueryRemark.accountId"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    /> -->
    <el-select
      v-model="listQueryValue.transferType"
      :placeholder="listQueryRemark.transferType"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.transferTypeOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-select
      v-model="listQueryValue.transferStatus"
      :placeholder="listQueryRemark.transferStatus"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.transferStatusOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="handleFilter"
    >
      {{ listQueryRemark.search }}
    </el-button>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleAdd"
    >
      {{ listQueryRemark.add }}
    </el-button>

    
    <add-dialogue-vue
      :isVisible="listQueryRemark.isAddVisible"
      @updateData="updateData"
      @hide="hide"
    ></add-dialogue-vue>
  </div>
</template>

<script>
import addDialogueVue from "./addDialogue.vue";

export default {
  components: {
    addDialogueVue,
  },
  data() {
    return {
      listQueryRemark: {
        accountId: "卡号",
        transferStatusOptions: [
          { key: "转账中", displayName: "转账中" },
          { key: "已结束", displayName: "已结束" },
        ],
        transferStatus: "转账状态",
        transferTypeOptions: [
          { key: "RealTimeTransfer", displayName: "实时转账" },
          { key: "TwoHourTransfer", displayName: "两小时转账" },
          { key: "OnedayTransfer", displayName: "一天转账" },
        ],
        transferType: "转账类型",
        search: "搜索",
        add: "添加",
        export: "导出",
        isAddVisible: false,
      },
      listQueryValue: {
        accountId: "",
        transferStatus: "",
        transferType: "",
      },
    };
  },
  methods: {
    getSortClass(key) {
      console.log(key + "***");
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        dataMap.sortByID(order);
      }
      //   /* 修改数据时，将调用$emit（），
      //   把自增结果传给父组件 */
      //   this.$emit('updateData',this.count)
    },
    handleAdd() {
      this.listQueryRemark.isAddVisible = true;
    },
    handleFilter() {},
    updateData() {
      //   /* 修改数据时，将调用$emit（），
      //   把自增结果传给父组件 */
      this.listQueryRemark.isAddVisible = false;
      this.$emit("updateData");
    },
    hide(){      
      this.listQueryRemark.isAddVisible = false;
    }
  },
};
</script>